<template>
  <div class="cartBox" @click="goDetail"  :class="{active:isLang}" :style="{backgroundImage:'url('+data.bgUrl+')'}">
<!--    <div class="addCard" @click.stop="addBox" v-if="isShow">-->
<!--      <img src="../../static/images/creat.png" alt="">-->
<!--    </div>-->
    <!--      上传图片-->

    <p style="font-size: 38rpx;margin:20rpx 0 30rpx 0;white-space:nowrap;overflow: hidden;text-overflow: ellipsis;text-align: center">  {{data.company}}</p>
<!--    <p > 绍兴市柯桥区友送银纺织品有限公司</p>-->
<!--    {{data.company}}-->
    <div class="weui-uploader__bd" style="display: flex;justify-content: space-between;">

      <ul class="weui-uploader__files" id="uploaderFiles" style="width:20%">
        <li class="weui-uploader__file weui-uploader__file_status" v-if="data.logo"   :style="{backgroundImage:'url('+data.logo+')'}" >
          <!--            <div class="weui-uploader__file-content" @click="remove(index)">-->
          <!--              <i class="weui-icon-warn"></i>-->
          <!--            </div>-->
        </li>
        <!--          avatarUrl-->
        <li class="weui-uploader__file weui-uploader__file_status" v-else   :style="{backgroundImage:'url('+userInfo.avatarUrl+')'}" >

        </li>



      </ul>
      <div style="box-sizing:border-box;padding-left: 40rpx;width: 76%">

        <div class="cart_top">
          <div class="cart_name">

<!--            <p  style="color: #000;font-weight: normal;margin-bottom: 20rpx"> {{data.name}}</p>-->
            <p  style=" font-family: 'KaiTi';color: #fff;font-weight: normal;margin-bottom:22rpx;margin-top:10rpx;">{{data.name}}</p>
            <p style="color: #fff;font-weight: normal;display: flex;justify-content: space-between;align-items: center;box-sizing: border-box;padding-right: 45rpx;" >
              <span>{{data.mobile}}</span>

              <img style="width:23px;height:23px;color: #fff" @click.stop="callPhone(data.mobile)" src="../icons/svg/phone.svg"/>
<!--              <img src="../../static/images/phone.png" alt="" style="width: 16px;height:16px;" @click.stop="callPhone(data.mobile)">-->
            </p>


          </div>
          <!--        <img src="../../../static/images/user.png" alt="">-->


        </div>

      </div>
    </div>


    <div class="cart_bt" style="margin-top:22rpx;" v-if="isLang">
      <ul class="list">
<!--        <li style="color: #508CEE"><img src="../../static/images/job.png" alt="">-->
<!--          <span style="font-weight: bold;font-size: 30rpx;"  v-if="data.position">{{data.position}}</span>-->
<!--          <span style="font-weight: bold;font-size: 30rpx;"  v-if="!data.position">暂未填写职务</span>-->
<!--        </li>-->
        <li style="color: #fff">
          <img style="font-size: 38px;color: #fff" src="../icons/svg/location.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="data.address">{{data.address}}</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!data.address">暂未填写公司地址</span>
        </li>
        <li style="color: #fff">
          <img style="font-size: 32px;color: #fff" src="../icons/svg/email.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="data.email">{{data.email}}</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!data.email">暂未填写邮箱</span>
        </li>

        <li style="color: #fff">
          <img style="width:20px;height:20px;color: #fff" src="../icons/svg/chuanzhen.svg"/>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="data.fax">{{data.fax}}</span>
          <span style="font-weight: bold;font-size: 30rpx;" v-if="!data.fax">暂未填写公司传真</span>
        </li>
      </ul>
    </div>
    <p class="more">
<!--      <span style="color: #508CEE" @click.stop="translateText(name,'English')">English/中文</span>-->
      </p>
    <van-icon :name="isLang?'arrow-up':'arrow-down'" />
  </div>
</template>

<script>
  import * as appId from "../utils/api"
  export default {
    name: "mb2",
    props:['data', 'isShow','empId','isMeIndex','widthItem','fax'],
    data(){
      return {
        images:[],
          isLang:false,
        userInfo:{}
      }
    },
    onReady(){
      this.userInfo=wx.getStorageSync('userInfo')&&JSON.parse(JSON.parse(wx.getStorageSync('userInfo')));

    },
    onShow() {
    },
    methods:{
      translateText (text, language) {
        // alert(text)
        this.$http.request({
          methods: 'get',
          url: 'https://translate.yandex.net/api/v1.5/tr.json/translate?key=trnsl.1.1.20191206T030625Z.6bbf4162ceb4c990.ccfdda13656c5603daac24eff79dbda2bc69cb9e&lang=' + language + '&text=' + text
        }).then((data) => {

        })
      },
      init(id){
       // console.log(id)
      },
        callPhone(phone){
            wx.makePhoneCall({
                phoneNumber: phone //仅为示例，并非真实的电话号码
            })
        },
      addBox(){
          if(this.isMeIndex){
              wx.navigateTo({ url: '/pages/index/main' })
          }else{
              let shareData= JSON.parse(wx.getStorageSync('shareData'))
              let Authorization= wx.getStorageSync('Authorization')
              let cartId=wx.getStorageSync('cartId')
              let userId= wx.getStorageSync('userId')
              wx.reLaunch({url:`/pages/index/main?Authorization=${Authorization}&cartId=${cartId}&userId=${userId}`})
          }
      },
      goDetail () {
          this.isLang=!this.isLang;
        // this.$emit('goCartDetail')
       // if (!this.isShow) {
       //   if(!this.empId){
       //      wx.reLaunch({ url: `/pages/cardDetail/main?id=${this.data.id}` })
       //   }else{
       //     wx.navigateTo({ url: `/pages/indexDetail/main?id=${this.data.id}`})
       //   }
       //
       // }
      },
      handleImagePreview(img,index){//预览图片
        const idx =index
        const images = this.images
       // console.log(images)
        wx.previewImage({
          current:images[idx],  //当前预览的图片
          urls: images,  //所有要预览的图片
        })
      },
      upload(e) {
        var that = this;
        wx.chooseImage({
          count: 1 , // 默认9
          sizeType: ['original', 'compressed'], // 可以指定是原图还是压缩图，默认二者都有
          sourceType: ['album', 'camera'], // 可以指定来源是相册还是相机，默认二者都有
          success: function(res) {
            //console.log(res)
            that.images.push(res.tempFilePaths[0])
            // that. urlTobase64(res.tempFilePaths[0])
          }
        })
      },
      remove(inex){
        this.images.splice(inex,1)
      },
    }
  }
</script>

<style scoped>
  .list{
    font-size: 26rpx;
  }
  .list>li{
    display: flex;
    justify-content:flex-start;
    align-items: center;
    margin-bottom: 28rpx;
  }
  .list>li>img{
    width: 16px;
    height:16px;
    margin-right: 20rpx;
  }
  .cart_top{
    margin-bottom: 20rpx;
    display: flex;
    justify-content: space-between;
  }
  .cartBox>img{
    position: absolute;
    top:199rpx;
    right: 30rpx;
    width: 60rpx;
    height: 60rpx;
  }
  .cart_top .weui-uploader__input-box{
    width: 120rpx;
    height: 120rpx
  }
  .cart_name>p:first-child{
    margin-bottom: 30rpx;
    font-size: 45rpx;
  }
  .cart_name>p{
    word-wrap: break-word;
     word-break: break-all;
    width: 100%;
    /*margin-bottom: 10rpx;*/
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;

    overflow: hidden;
    /*overflow: hidden;*/
    /*text-overflow: ellipsis;*/
  }

  .cart_name{
    width: 100%;
    font-weight: bold;
    font-size: 35rpx;
  }
  .addCard{
    position: absolute;
    top:30rpx;
    right:30rpx;
    width: 80rpx;
    height:80rpx;
    background: rgb(174,174,174);
    border-radius: 50%;
    text-align: center;
    line-height: 100rpx;
  }
  .addCard>img{
    width:60rpx;
    height: 60rpx;
  }
  .cartBox{
    width:90%;
    height:400rpx ;
    /*background-color: #f7f7f7;*/
    overflow: hidden;
    transition: all 0.5s;
    position: relative;
    margin:0 auto;
    border-radius: 10px;
    box-shadow: 5px 5px 5px #999;
    /*border: 5px solid rgb(61,176,243);*/
    border: 1px solid #000;
    color: #fff;
    /*border-bottom: 5px solid rgb(61,176,243);*/
    box-sizing: border-box;
    /*display: flex;*/
    /*justify-content: flex-start;*/
    padding:25rpx;
    /*background:#f7f7f7 url("../../static/images/timg.jpg") no-repeat;*/
    /*background-size: 100% 100%;*/
    /*background:#f7f7f7 url("https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1577982769895&di=2b65bd6b72e73c15f936d4ddfedaaccf&imgtype=0&src=http%3A%2F%2Fbpic.588ku.com%2Fback_pic%2F03%2F52%2F00%2F6357931b6ead28e.jpg") no-repeat;*/
    background:#f7f7f7 url("https://img.xbdzmp.com/2020042309473683f78cfaf6c0.jpg") no-repeat;
    background-size: auto;
  }
  .cartBox.active{
    height: 590rpx;
    transition: all 0.5s;
  }
  .cartBox .weui-uploader__file_status:before{
    background-color:transparent ;
  }
  .cartBox.active ._van-icon{
    top:537rpx;
  }
  .cartBox .weui-uploader__file{
    width:  150rpx;
    height: 150rpx;
    border-radius: 20rpx;
    margin-top:5rpx;
  }
  .cartBox ._van-icon{
    width: 20px;
    height: 20px;
    position:absolute;
    top:338rpx;
    right:48%;
  }
  .cartBox .more{
    text-align: right;
    position: absolute;
   left:30rpx;
    bottom:30rpx;
    font-size: 28rpx;
  }
</style>
